import React from 'react';
import { Menu, Button } from 'antd';
import style from './index.module.scss'
import { Tag } from 'antd';
import {
	GithubOutlined
} from '@ant-design/icons';
import { Row, Col, Layout, } from 'antd';
import {
	MenuUnfoldOutlined,
	MenuFoldOutlined,
	PieChartOutlined,
	MailOutlined,
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import { inject,observer } from 'mobx-react'
const { SubMenu } = Menu;
 
@inject('store') // 将store中的数据注入当前组件
@observer

class Home extends React.Component {
	state = {
		collapsed: false,
		checked: false,
		tagIndex: -1,
		tagList: [
			// {
			// 	name: 'test1'
			// },
			// {
			// 	name: 'test2'
			// }
		],
		menuList: [
			{
				name: '组织架构',
				path: '/car/title',
				children: [
					{
						name: '人员管理',
						path: '/car',
					},
					{
						name: '车间管理',
						path: '/icon',
					}
				]
			},
			{
				name: '生产管理',
				path: '/task/title',
				children: [
					{
						name: '请销假',
						path: '/leave',
					},
					{
						name: '任务管理',
						path: '/task',
					}
				]
			}
		],
		openKeys: [],
		selectedKeys: [],
	};



	toggleCollapsed = () => {
		this.setState({
			collapsed: !this.state.collapsed,
			openKeys: this.state.collapsed ? this.openKeys : []
		});
	};

	/* tag关闭 */
	tagLog = (item) => {
		console.log(item)
		const list = this.state.tagList.filter((item2,) => {
			return item.name !== item2.name
		})
		if (list && list !== [] && list.length && list.length > 0) {
			console.log(list)
			this.setState({
				tagList: [...list],
				selectedKeys: list[list.length - 1]['keyPath']
			})
		} else {
			this.props.history.push('/')
			this.setState({
				selectedKeys: ['/'],
				openKeys: [],
				tagList: []
			})

		}


	}

	/* 菜单选项点击 */
	MenuClick = ({ item, key, keyPath, domEvent }) => {

		console.log(keyPath, this.state.selectedKeys)
		this.props.history.push(key)
		let bool = false;
		bool = this.state.tagList.some(item2 => {
			return item2.name === item.props.name
		})


		if (!bool) {
			this.setState({
				tagList: [...this.state.tagList, { name: item.props.name, key: key, keyPath: keyPath }],
				selectedKeys: keyPath
			})
		} else {
			this.setState({
				selectedKeys: keyPath
			})
		}

	}
	/* 菜单box点击 */
	onMenuClick = ({ key }) => {
		// console.log([key])
		console.log(this.state.openKeys)
		if (!this.state.openKeys) return
		// console.log(this.state.openKeys[0] === key)
		if (this.state.openKeys[0] === key) {
			this.setState({
				openKeys: []
			})
		} else {
			this.setState({
				openKeys: [key]
			})
		}

	}
	/* 加载menu方法 */
	menuListFun = (item) => {
		if (item.children) {
			return (
				<SubMenu onTitleClick={this.onMenuClick} key={item.path} icon={<MailOutlined />} title={item.name}>
					{
						item.children.map((item2) => {
							if (item2.children) {
								return (
									this.menuListFun(item2)
								)
							} else {
								return <Menu.Item name={item2.name} key={item2.path}>{item2.name}</Menu.Item>
							}

						})
					}
				</SubMenu>

			)


		} else {
			return (
				<SubMenu onTitleClick={this.onMenuClick} key={item.path} icon={<MailOutlined />} title={item.name}>
					{/* <Menu.Item key={item.path}>{item.name}</Menu.Item> */}
				</SubMenu>
			)
		}

	}

	componentDidMount() {
		this.watch()
	}

	watch = () => {
		this.props.store.count.increment()
	}

	tagClick = (item) => {
		console.log(item)
		this.props.history.push(item.key)
		this.setState({
			selectedKeys: item.keyPath,
			openKeys: [item.keyPath[item.keyPath.length - 1]]
		})

	}


	render() {
		return (

			<>
				<div className={style.mainbox}>
					<div className={style.flex}>
						<div className={style.slideMenu} style={!this.state.collapsed ? { width: 230 } : { width: 80 }}>
							<div className={style.menuTop}>
								<span>
									{!this.state.collapsed ? '太原城轨维管数字化平台' : <GithubOutlined style={{ fontSize: 30 }} />}
								</span>
							</div>
							<Menu
								// openKeys={this.state.openKeys}
								selectedKeys={this.state.selectedKeys}
								openKeys={this.state.openKeys}
								mode="inline"
								theme="dark"
								inlineCollapsed={this.state.collapsed}
								onClick={this.MenuClick}

							>
								<Menu.Item key="/" name="首页" icon={<PieChartOutlined />}>
									首页
								</Menu.Item>
								{
									this.state.menuList.map((item, index) => {
										return (
											item.children ? this.menuListFun(item, index) : this.menuListFun(item, index)
										)
									})
								}


							</Menu>
						</div>
						<div className={style.main}>
							<div className={style.header}>
								<div className={style.headerTop}>

									<Button className={style.button} type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
										{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
									</Button>

								</div>
								<Row className={style.headerTop}>

									<Col span={24} >
										{

											this.state.tagList.map((item) => {
												if (!item) return false
												return <Tag
													style={{ cursor: 'pointer' }}
													className={item.keyPath[0] === this.state.selectedKeys[0] ? style.active : ''}
													key={item.name} closable data="1123"
													onClose={() => this.tagLog(item)}
													onClick={() => {
														this.tagClick(item)
													}}
												>{item.name}

												</Tag>
											})
										}

									</Col>

								</Row>

							</div>
							<div>
								{this.props.children}
							</div>
						</div>
					</div>
				</div>

			</>
		);
	}
}

export default withRouter(Home);